<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/member.css" />
	</head>

	<body>
		
		<div class="mui-content getHeight bgBlueGrey" id="order_detail" style="height: 100%;">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">订单详情</h1>
		</header>
		    <div class="course_order mt20">
				<div class="p2015">
					<img v-if="orderData.order_type == 'shop'" class="course_pic" :src="orderData.product_img">
					<img v-else-if="orderData.order_type == 'ebook'" class="course_pic" :src="orderData.goods_info.thumb">
					<img v-else class="course_pic" :src="orderData.goods_info.product_img">
					<div class="course_rtxt">
						<h4 class="ellipsis2">{{orderData.goods_info.product_title}}</h4>
						<p class="coursePrice">￥{{orderData.goods_info.amount}}</p>
					</div>
				</div>
			</div>
			<div class="orderDetail">
				<div class="kf_box">
					<span class="grey">客服</span>
					<span>{{orderData.kefuName}}</span>
				</div>
				<div v-if="orderData.order_type=='shop'" class="showAddrInfo">
					<div class="nameTel">
						<span><i class="showName">{{orderData.addressInfo.nickname}}</i></span>
						<span class="showTel">{{orderData.addressInfo.mobile}}</span>
					</div>
				</div>
				<div class="showOrderNum">
					<span class="grey">订单编号</span>
					<span>{{orderData.order_num}}</span>
				</div>
				<div class="createTime">
					<span class="grey">创建时间</span>
					<span>{{orderData.order_time}}</span>
				</div>
				<div class="finalPrice">
					<span class="grey">订单价格</span>
					<span class="red">￥{{orderData.goods_info.amount}}</span>
				</div>
			</div>
			
			<div class="fix_button_group">
				<div class="buttonGroup"v-if="orderData.ispay=='NO_PAY'">
					<a class="qxdd_btn" @tap="show_pay">取消订单</a>
					<a class="zfdd_btn" @tap="pay_page">确认支付</a>
				</div>
			</div>
			<!--弹出层-->
			<div class="popMask" @tap="closePay"></div>
			<div class="popPay">
				<div class="popCont payHeight">
					<div class="pop_tt">
						<span class="colsePay" @tap="closePay"><img src="../../../images/pay_close.png" alt="" /></span>
						<h4>选择支付方式</h4>
					</div>
					<div class="pay_way">
						<ul class="mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell  mui-selected" @tap="pay_way('wxpay')">
								<a class="mui-navigate-right"><em class="wx_bg"></em>微信</a>
							</li>
							<li class="mui-table-view-cell" @tap="pay_way('alipay')">
								<a class="mui-navigate-right"><em class="zfb_bg"></em>支付宝</a>
							</li>
						</ul>
					</div>
					<div class="useBtn" @tap="pay(pay_methods)">
						<a>确认支付</a>
					</div>
				</div>
			</div>
			<div class="gwDialog">
				<div class="gwConfirm">
					<p class="tac">确定取消订单？</p>
					<div class="dialog_btn">
						<a class="gw_cancel" @tap="cancle_pay">取消</a>
						<a class="gw_comfirm" @tap="confirm_pay(order_num)">确定</a>
					</div>
				</div>
			</div>
				
		</div>
		
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../../../js/h.min.js"></script>
		<script type="text/javascript" src="../../../js/tpl/orderDetail.js"></script>
		<script src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/pay.js"></script>
	</body>

</html>